<template>
	<view class="step-info">
		<view class="step-number">
			<block v-for="(item,index) in stepList" :key="index">
				<view @click.stop="openItem(item)" class="item-state">
					<image class="state-img" :src="getImg(index) || (item.unCheckedImg || unCheckedImg)"
						:style="getImageStyle(index)">
					</image>
					<view class="step-name">
						<view class="name" :style="{color:getColor(index) || (item.unCheckedColor || unCheckedColor)}">
							{{item.name}}
						</view>
					</view>
				</view>
			</block>
			<!-- 独立的线条元素 -->
			<view class="line" v-for="(item,index) in (stepList.length-1)" :key="'line'+index"
				:style="getLineStyle(index)">
			</view>
		</view>
	</view>
</template>

<script>
	import checkedImg from '../../static/checkedImg.png'
	import unCheckedImg from '../../static/unCheckedImg.png'
	export default {
		props: {
			//当前步骤
			step: {
				type: Number,
				default: 1
			},
			//步骤列表
			stepList: {
				type: Array,
				default: null
			},
			//已完成的图片路径
			checkedImg: {
				type: String,
				default: checkedImg
			},
			//未完成的图片路径
			unCheckedImg: {
				type: String,
				default: unCheckedImg
			},
			//已完成的字体颜色
			checkedColor: {
				type: String,
				default: '#287BF8'
			},
			//未完成的字体颜色
			unCheckedColor: {
				type: String,
				default: '#333333'
			},
			//已完成的线条颜色
			checkedLine: {
				type: String,
				default: '#287BF8'
			},
			//未完成的线条颜色
			unCheckedLine: {
				type: String,
				default: '#bebebe'
			},
			//已完成的图片宽度
			checkedImgWidth: {
				type: String,
				default: '40rpx'
			},
			//已完成的图片高度
			checkedImgHeight: {
				type: String,
				default: '40rpx'
			},
			//未完成的图片宽度
			unCheckedImgWidth: {
				type: String,
				default: '40rpx'
			},
			//未完成的图片高度
			unCheckedImgHeight: {
				type: String,
				default: '40rpx'
			}
		},
		data() {
			return {}
		},
		methods: {
			//获取图片
			getImg(e) {
				let index = Number(e)
				if (this.step > index) return this?.stepList?.[index].checkedImg || this.checkedImg
			},
			//获取图片样式
			getImageStyle(index) {
				const isCompleted = this.step > index;

				if (isCompleted) {
					// 已完成的图片样式
					const width = this?.stepList?.[index]?.checkedImgWidth || this.checkedImgWidth;
					const height = this?.stepList?.[index]?.checkedImgHeight || this.checkedImgHeight;
					return {
						width: width,
						height: height
					};
				} else {
					// 未完成的图片样式
					const width = this?.stepList?.[index]?.unCheckedImgWidth || this.unCheckedImgWidth;
					const height = this?.stepList?.[index]?.unCheckedImgHeight || this.unCheckedImgHeight;
					return {
						width: width,
						height: height
					};
				}
			},
			//获取线
			getLine(e) {
				let index = Number(e)
				if (this.step > index) return this?.stepList?.[index].checkedLine || this.checkedLine
			},
			//获取颜色
			getColor(e) {
				let index = Number(e)
				if (this.step > index) return this?.stepList?.[index].checkedColor || this.checkedColor
			},
			//获取线条样式（虚线）
			getLineStyle(index) {
				const lineColor = this.getLine(index) || (this.stepList[index]?.unCheckedLine || this.unCheckedLine);
				const itemWidth = 100 / this.stepList.length;
				const left = itemWidth * (index + 0.5);
				const width = itemWidth;

				return {
					'left': `${left}%`,
					'width': `${width}%`,
					'background-image': `linear-gradient(to right, ${lineColor} 50%, transparent 50%)`,
					'background-size': '20rpx 4rpx',
					'background-repeat': 'repeat-x'
				};
			},
			openItem(item) {
				this.$emit('clickStep', item)
			}
		}
	}
</script>

<style>
	.step-info {
		width: 100%;
		height: auto;
	}

	.step-number {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.item-state {
		position: relative;
		z-index: 2;
	}

	.line {
		position: absolute;
		top: 26rpx;
		height: 4rpx;
		z-index: 1;
		transform: translateY(-50%);
	}

	.state-img {
		display: flex;
		margin: auto;
	}

	.step-name {
		margin-top: 16rpx;
		width: 200rpx;
		align-items: center;
		justify-content: space-between;
		font-weight: bold;
		text-align: center
	}

	.name {
		width: 200rpx;
		font-size: 24rpx;
		line-height: 20rpx;
		color: #333333;
	}
</style>